<template>
	<view>
		<qiun-data-charts :type="type" :chartData="chartData" :opts="opts" />
	</view>
</template>

<script>
	export default {
		name: "gt-chart",
		props: {
			type: {
				type: String,
				default: function() {
					return 'area';
				}
			},
			chartData: {
				type: Object,
				default: function() {
					return {
						categories:[],
						series:[]
						// categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
						// series: [
						// 	{
						// 		name: "成交量A",
						// 		data: [35, 8, 25, 37, 4, 20]
						// 	},
						// 	{
						// 		name: "成交量B",
						// 		data: [70, 40, 65, 100, 44, 68]
						// 	},
						// 	{
						// 		name: "成交量C",
						// 		data: [100, 80, 95, 150, 112, 132]
						// 	}
						// ]
						// [{
						// 	"name": "一班",
						// 	"value": 50
						// }, {
						// 	"name": "二班",
						// 	"value": 30
						// }, {
						// 	"name": "三班",
						// 	"value": 20
						// }, {
						// 	"name": "四班",
						// 	"value": 18
						// }, {
						// 	"name": "五班",
						// 	"value": 8
						// }]
					};
				}
			}
		},
		computed:{
			opts(){
				if(this.type == 'area'){
					return this.areaOpts;
				}else if(this.type == 'rose'){
					return this.roseOpts;
				}
			}
		},
		data() {
			return {
				roseOpts: {
				        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				        padding: [5,5,5,5],
				        enableScroll: false,
				        legend: {
				          show: true,
				          position: "left",
				          lineHeight: 25
				        },
				        extra: {
				          rose: {
				            type: "area",
				            minRadius: 50,
				            activeOpacity: 0.5,
				            activeRadius: 10,
				            offsetAngle: 0,
				            labelWidth: 15,
				            border: false,
				            borderWidth: 2,
				            borderColor: "#FFFFFF"
				          }
				        }
				      },
				areaOpts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: true,
							activeType: "hollow"
						}
					}
				}
			}
		},
		created() {},
		methods: {}
	}
</script>

<style lang="scss" scoped>
</style>